<template>
  <el-card>
    <div slot="header">
          <el-button
            :disabled="loading"
            @click="$router.push({ name: 'advert-space-create' })"
          >添加广告位</el-button>
    </div>
    <el-table
      :data="adverSpace"
      style="width: 100%"
      height="500"
      size="medium"
      v-loading="loading"
    >
      <el-table-column
        prop="spaceKey"
        label="spaceKey"
       >
      </el-table-column>
      <el-table-column
        prop="name"
        label="广告位名称"
        >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        >
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间"
        >
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleSelectRole(scope.row)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

  </el-card>
</template>

<script lang="ts">
import Vue from 'vue'
import { getQueryAdvertSpace } from '@/services/advert-space'
import { Form } from 'element-ui'

export default Vue.extend({
  name: 'AdvertSpaceList',
  data () {
    return {
      adverSpace: [],
      filterParams: {
        currentPage: 1,
        pageSize: 10,
        phone: '',
        startCreateTime: '',
        endCreateTime: '',
        rangeDate: []
      },
      totalCount: 0,
      loading: true,
      dialogVisible: false,
      roles: [],
      roleIdList: [],
      currentUser: null // 分配角色的当前用户
    }
  },

  created () {
    this.loadUsers()
  },

  methods: {
    async loadUsers () {
      this.loading = true
      const { data } = await getQueryAdvertSpace()
      console.log(data)
      this.adverSpace = data.content
      this.loading = false
    },

    handleQuery () {
      this.filterParams.currentPage = 1
      this.loadUsers()
    },

    handleReset () {
      (this.$refs['filter-form'] as Form).resetFields()
      this.loadUsers()
    },
    handleSelectRole (item: any) {
      this.$router.push({
        name: 'advert-space-edit',
        params: {
          id: item.id
        }
      })
    }
  }
})
</script>

<style lang="scss" scoped></style>
